<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>武器箱</title>
</head>

<style>
    ::-webkit-scrollbar {
        display: none;
    }
    body {
        background-image: url(/static/image/index-section2-bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        margin: 0;
        padding: 0;
    }

    .bigBox {
        width: auto;
        height: auto;
    }

    .top {
        width: 100%;
        height: 71px;
        border-bottom: 1px solid;
    }

    .center {
        width: 65vw;
        height: 79vh;
        border: 1px solid gray;
        margin: 10px auto 0px;
        overflow: scroll;
        color: white;
    }

    .boxName {
        width: auto;
        height: 35vh;
        border-bottom: 1px solid gray;
        margin: 0px auto 0px;
        text-align: center;
        /* background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
        background-color: #00000009;
        line-height: 30px;
    }
    .boxName span{
        font-size: 25px;
        font-weight: bold;
    }
    .boxName b{
        font-size: 13px;
    }
    .boxImg > img{
        border: none;
    }

    .boxList {
        width: 100%;
        height: auto;
        margin-left: 23px;
    }

    .gunBox {
        width: 140px;
        height: 170px;
        text-align: center;
        margin: 10px 0 10px 40px;
        float: left;
        font-size: 14px;
        border: 1px solid #343434;
    }

    .gunBox>.gun-img {
        width: 140px;
        height: 130px;
        background-color: #acacac;
    }

    .gunBox>.gun-name {
        width: 140px;
        height: 45px;
        line-height: 22px;
        font-size: 13px;
    }

    .open {
        width: 65vw;
        height: 60px;
        margin: 0px auto 0px;
        border: 1px solid gray;
        border-top: none;
        line-height: 60px;
    }
    .open > .arrows{
        width: 50vw;
        height: 60px;
        float: left;
        letter-spacing: 25px;
    }
    .open > .openBtn{
        width: 15vw;
        height: 60px;
        background-color: green;
        float: left;
        text-align: center;
        font-size: 18px;
        color: #e7e7e7;
    }
    .open > .openBtn:hover{
        cursor: pointer;
        background-color: #006300;
    }

    .result{
        display: none;
        background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        z-index: 11;
        width: 65vw;
        height:82vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        transition: 1s;
        text-align: center;
    }
    .result b{
        margin-top: 10px;
        font-size: 20px;
        font-weight: normal;
    }
    .resName{
        width: auto;
        height: 10vh;
        font-size: 30px;
        border-bottom: 1px solid;
        line-height: 10vh;
        margin-top: 10px;
    }
    .resImg{
        width: 40vw;
        height: 55vh;
        margin: 0 auto;
    }
    .abrasion{
        line-height: 6vh;
        height: 10vh;
        width: auto;
        background: #5e98d9;
    }
    .strip{
        width: 45vw;
        height: 2vh;
        margin: 0 auto;
    }
    .a1,.a2,.a3,.a4,.a5{
        height: 2vh;
        float: left;
    }
    .a1{
        width: 3.1vw;
        background: #4ec7a7;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .a2{
        width: 3.15vw;
        background: #70ab8b;
    }
    .a3{
        width: 9.9vw;
        background: #cfae8e;
    }
    .a4{
        width: 3.1vw;
        background: #d4948e;
    }
    .a5{
        width: 24.3vw;
        background: #cf534e;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

</style>

<body>

<script src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

    $(function (){

            $("#openBtn").click(function (){


                var boxId = $("#boxId").val();

                $.ajax({
                    url:"/goods/openBox?id=" + boxId,
                    method:"post",
                    dataType:"json",
                    success:function (data){
                        console.log(data);
                        if(data != "-1"){
                            $("#result").css("display",'block');
                            $("#resImg").children("img").attr("src",data.goods.converPath);
                            $("#openBtn").css("display",'none');
                            $("#closeBtn").css("display",'block');
                            $("#resName").text(data.goods.goodsType.name + " " + data.goods.coating +
                                "(" + data.appearance + ")");
                            $("#ab").html("磨损值:" + data.abrasion);
                        } else {
                            alert("余额不足");
                        }
                    },
                    error:function (){
                        alert("请求错误");
                    }
                })


            });

            $("#closeBtn").click(function (){
                $("#result").css("display",'none');
                $("#openBtn").css("display",'block');
                $("#closeBtn").css("display",'none');
            })

    });

</script>

<div class="bigBox">

    <!-- 页面头部内容 -->
    <div class="top">
        <iframe src="${pageContext.request.contextPath }/goods/head" scrolling="no" width="100%" height="71px" frameborder="0" name="open"></iframe>
    </div>

    <!-- 页面中间内容 -->
    <div class="center">
        <div class="boxName">
            <span>开箱</span><br/>
            <b>解锁"${requestScope.goodsList[0].box.boxName}"武器箱</b>
            <div class="boxImg">
                <img src="${requestScope.goodsList[0].box.boxImg}" width="200px" height="200px" border="none">
            </div>
        </div>

        <div class="boxList" id="boxList">

            <div style="margin: 20px 0 0 35px;">可能开出以下物品:</div>

            <c:forEach items="${requestScope.goodsList}" var="goods">
                <div class="gunBox">
                    <div class="gun-img">
                        <img src="${goods.converPath}" width="134px" height="100px" />
                    </div>
                    <c:if test="${goods.quality eq '违禁'}">
                        <div class="gun-name" style="background-color:#e4ae39">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq '隐秘'}">
                        <div class="gun-name" style="background-color:#eb4b4b">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq '非凡'}">
                        <div class="gun-name" style="background-color:#eb4b4b">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq '保密'}">
                        <div class="gun-name" style="background-color:#d32ce6">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq'奇异'}">
                        <div class="gun-name" style="background-color:#d32ce6">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq '受限'}">
                        <div class="gun-name" style="background-color:#8847ff">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq '卓越'}">
                        <div class="gun-name" style="background-color:#8847ff">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq '军规级'}">
                        <div class="gun-name" style="background-color:#4b69ff">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq '高级'}">
                        <div class="gun-name" style="background-color:#4b69ff">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq '工业级'}">
                        <div class="gun-name" style="background-color:#5e98d9">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq '普通'}">
                        <div class="gun-name" style="background-color:#b0c3d9">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>
                    <c:if test="${goods.quality eq '消费级'}">
                        <div class="gun-name" style="background-color:#b0c3d9">
                            <font>${goods.goodsType.name}<br>${goods.coating}</font>
                        </div>
                    </c:if>

                </div>
            </c:forEach>


        </div>
    </div>

    <!-- 开启箱子部分 -->
    <div class="open">
        <div class="arrows">
            <font color="#8a8a8a" size="5">

            </font>
        </div>
        <div class="openBtn" id="openBtn">
            <input value="${requestScope.goodsList[0].box.id}" style="display: none" id="boxId">
            <b>Open Box</b>
        </div>
        <div class="openBtn" id="closeBtn" style="display: none">
            <b>Close</b>
        </div>
    </div>

    <div class="result" id="result">
        <div class="reContent">
            <b>恭喜您获得</b>
            <div class="resName" id="resName" style="font-size: 27px"></div>
            <div class="resImg" id="resImg">
                <img src="/upload/5c89c9017f9d2a32366f7046VcbNTFsK02.png" >
            </div>
        </div>
        <div class="abrasion">
            <span id="ab"></span>
            <div class="strip">
                <div class="a1"></div>
                <div class="a2"></div>
                <div class="a3"></div>
                <div class="a4"></div>
                <div class="a5"></div>
            </div>
        </div>
    </div>
    <%--页面尾部--%>
    <div class="tail">
        <iframe src="${pageContext.request.contextPath }/goods/tail" scrolling="no" width="100%" height="324px" frameborder="0" ></iframe>
    </div>
</div>


</body>
</html>

